<template>
    <div class="towing zy-content">
      <div v-show="!isShowDetails">
        <div class="searchBox search-box-layout">
          <Row :gutter="24">
            <Col span="6">
              <div>
                <p class="label">{{ $t("equipmentscrapped.Location") }}</p>
                <div class="ipt">
<!--                  <Cascader-->
<!--                    clearable-->
<!--                    :data="orgList"-->
<!--                    v-model="searchParams.orgCode"-->
<!--                    :placeholder="$t('common.PleaseSelect')"-->
<!--                    change-on-select-->
<!--                  ></Cascader>-->
                  <Cascader :value.sync="searchParams.orgCodes"/>
                </div>
              </div>
            </Col>
            <Col span="4">
              <div>
                <p class="label">{{ $t("maintenance.EquipmentNo") }}</p>
                <div class="ipt">
                  <Select
                    v-model="searchParams.deviceNo"
                    filterable
                    label-in-value
                    clearable
                    :remote-method="searchDevice"
                    :placeholder="$t('maintenance.EquipmentNo')"
                  >
                    <Option
                      v-for="(item, index) of deviceList"
                      :value="item.deviceNo"
                      :key="index"
                      :label="item.deviceNo + '-' + item.deviceName"
                    >
                    </Option>
                  </Select>
                </div>
              </div>
            </Col>
            <Col span="4">
              <div>
                <p class="label">{{ $t("实时状态") }}</p>
                <div class="ipt">
                  <Select
                    v-model="searchParams.operatingState"
                    filterable
                    clearable
                    :placeholder="$t('common.PleaseSelect')"
                  >
                    <Option
                      v-for="(item, index) of statusList"
                      :value="item.id"
                      :key="index"
                      :label="item.name"
                    >
                    </Option>
                  </Select>
                </div>
              </div>
            </Col>
            <Col span="4">
              <div>
                <p class="label">{{ $t("日期") }}</p>
                <div class="ipt">
                  <DatePicker
                    type="daterange"
                    :value="dateTimeRange"
                    :placeholder="$t('common.PleaseSelect')"
                    transfer-class-name="hide-handle-cancel"
                    placement="bottom"
                    transfer
                    :clearable="false"
                    @on-change="handleChangeDate"
                  >
                  </DatePicker>
                </div>
              </div>
            </Col>
            <Col span="4">
              <div>
                <p class="label hide-label">--</p>
                <div class="ipt">
                  <Button
                    class="search-btn"
                    type="primary"
                    @click="changeNum()"
                    >{{ $t("common.Query") }}</Button
                  >
                  <Button class="reset-btn" @click="changeNum()"
                    >{{ $t("common.reset") }}
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        <div class="list-layout mt16">
          <div class="btns clear">
            <span class="title">{{ $t("common.listInformation") }}</span>
            <Button @click="exportTemplateClick">{{
              $t("导出")
            }}</Button>
              <Button @click="getTableColumns(columns)">
                  {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
              </Button>
          </div>
          <div class="tableContent">
            <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" :data="dataSource">
              <template slot-scope="{ row }" slot="taskCount">
               <span @click="taskCountOpen(row)"
                     style="cursor: pointer;
               color: #035beb;
               text-decoration:underline;  "
               >{{row.taskCount}}</span>
              </template>
            </Table>
          </div>
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" />
            <Page
              :total="total"
              :page-size="pageSize"
              :page-size-opts="$variable.pageSizes"
              :current="pageNum"
              @on-change="changePageNum"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>

      <Modal :mask-closable="false"
          width="75%"
          v-model="tableVisible"
          @on-visible-change="modelChange"
          :title="`${$t('任务详情')}`"
          :footer-hide="true"
          class="modal-wrap-layout"
      >
        <div style="padding-bottom: 10px;">
          <Button @click="modelExport">{{$t('common.batchExport')}}</Button>
        </div>
        <Table height="600" class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'taskdetailmodaltable')}" :columns="columnsInfo"
               :data="dataSourceInfo"/>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="modeLtotal" />
          <Page
              :total="modeLtotal"
              :page-size="modeLpageSize"
              :page-size-opts="$variable.pageSizes"
              :current="modeLpageNum"
              @on-change="modeLchangePageNum"
              @on-page-size-change="modeLchangePageSize"
              show-sizer
              show-total
          />
        </div>
      </Modal>

    </div>
  </template>

  <script>
  import fileDownload from "js-file-download";
  import recursion from "../../../util/recursion";
  import Cascader from '@/components/Cascader'
  import toggleTableOperation from "@/mixins/toggleTableOperation";
  export default {
    name: "towing",
    components: {Cascader},
      mixins:[toggleTableOperation],
    data() {
      return {
        modeLtotal: 0,
        modeLpageNum: 1,
        modeLpageSize: 10,
        columnsInfo:[
          {
            title: `${this.$t("设备编号")}`,
            key: "deviceNo",
            align: "center",
            minWidth: 110,
              resizable: true
          },
          {
            title: `${this.$t("开始位置")}`,
            key: "startLocation",
            align: "center",
            minWidth: 130,
              resizable: true
          },
          {
            title: `${this.$t("结束位置")}`,
            key: "endLocation",
            align: "center",
            minWidth: 130,
              resizable: true
          },
          {
            title: `${this.$t("任务距离")}`,
            key: "distance",
            align: "center",
            minWidth: 110,
              resizable: true
          },
          {
            title: `${this.$t("理论任务距离")}`,
            key: "theoreticalDuration",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("任务开始时间")}`,
            key: "startTime",
            align: "center",
            minWidth: 170,
              resizable: true
          },
          {
            title: `${this.$t("任务结束时间")}`,
            key: "endTime",
            align: "center",
            minWidth: 170,
              resizable: true
          },
          {
            title: `${this.$t("任务持续时间")}(s)`,
            key: "taskDuration",
            align: "center",
            minWidth: 150,
              resizable: true
          },
          {
            title: `${this.$t("理论载货数量")}`,
            key: "theoryCargoQuantity",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("实际载货数量")}`,
            key: "realCargoQuantity",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("出门挂车数量")}`,
            key: "outgoingTrailersQuantity",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("返回挂车数量")}`,
            key: "returnTrailersQuantity",
            align: "center",
            minWidth: 120,
              resizable: true
          }
        ],
        dataSourceInfo:[],
        searchParams: {},
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pageSizeOption: [10, 20, 30],
        statusList: [
          { id: 1, name: this.$t("故障") },
          { id: 0, name: this.$t("运行") },
          { id: 2, name: this.$t("空闲") }
        ],
        deviceList: [],
        columns: [
          {
            title: `${this.$t("工厂")}`,
            key: "factoryName",
            align: "center",
            minWidth: 200,
              resizable: true
          },
          {
            title: `${this.$t("设备编号")}`,
            key: "deviceNo",
            align: "center",
            minWidth: 160,
              resizable: true
          },
          {
            title: `${this.$t("资产编号")}`,
            key: "assetsNo",
            align: "center",
            minWidth: 150,
              resizable: true
          },
          {
            title: `${this.$t("maintenance.TaskDate")}`,
            key: "scheduleDate",
            align: "center",
            minWidth: 150,
              resizable: true
          },
          {
            title: `${this.$t("计划运行时间")}(min)`,
            key: "planTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("理论运行时间")}(min)`,
            key: "theoryTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("实际运行时间")}(min)`,
            key: "runTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("报警时间")}(min)`,
            key: "errorTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("待机时间")}(min)`,
            key: "standByTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("关机时间")}(min)`,
            key: "unattendedTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            title: `${this.$t("实时状态")}`,
            key: "agvStatusStr",
            align: "center",
            minWidth: 100,
              resizable: true
          },
          {
            title: `${this.$t("实时位置")}`,
            key: "agvPosition",
            align: "center",
            minWidth: 220,
              resizable: true
          },
          {
            title: `${this.$t("报警信息")}`,
            key: "alarmInformation",
            align: "center",
            minWidth: 220,
            ellipsis: true,
              resizable: true
          },
          {
            title: `${this.$t("任务数")}`,
            key: "taskCount",
            align: "center",
            slot:"taskCount",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("报警次数")}`,
            key: "errorCount",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            title: `${this.$t("时间稼动率")}(%)`,
            key: "a",
            align: "center",
            minWidth: 150,
              resizable: true
          },
          {
            title: `${this.$t("性能稼动率")}(%)`,
            key: "p",
            align: "center",
            minWidth: 150,
              resizable: true
          },
          {
            title: `OEE(%)`,
            key: "oee",
            align: "center",
            minWidth: 150,
              resizable: true
          },
        ],
        tableVisible:false,
        dataSource: [],
        dateTimeRange: [],
        orgList: [],
        tarGetrow:{}
      };
    },
      created() {
        this.getTableColumnsWidth(this.columns)
          this.getColumnWidth(this.columnsInfo,'taskdetailmodaltable')
      },
      mounted() {
      this.changeNum();
      this.getOrgList();
    },
    methods: {
      modelExport(){
        const {deviceNo,scheduleDate} =  this.tarGetrow
        const filName = this.$t('Towing详情');
        this.axios({
          method: "post",
          url: "/dms/agv/export",
          responseType: "blob",
          data: {
            deviceNo,scheduleDate
          },
        }).then((res) => {
          fileDownload(res, filName + ".xlsx");
        });
      },
      modelChange(val){
        if (!val){
          this.modeLpageNum = 1
          this.modeLpageSize = 10
          this.modeLtotal = 0
          this.dataSourceInfo = []
        }
      },
      modeLchangePageSize(val) {
        this.modeLpageSize = val
        this.taskCountOpen(this.tarGetrow)
      },
      modeLchangePageNum(val){
        this.modeLpageNum = val
        this.taskCountOpen(this.tarGetrow)
      },
      taskCountOpen(row){
        this.tarGetrow = row
        const {deviceNo,scheduleDate} = row
        if (!(this.dataSourceInfo && this.dataSourceInfo.length)){
          this.tableVisible = false
        }
        this.axios({
          method: "post",
          url: "/dms/agv/list",
          data: {
            deviceNo,
            scheduleDate,
            pageNum: this.modeLpageNum,
            pageSize: this.modeLpageSize,
          }
        }).then(res=>{
          if (res.data.list && res.data.list.length){
            this.dataSourceInfo = res.data.list
            this.tableVisible = true
            this.modeLtotal = res.data.total
          }else {
            this.$Message.warning('此任务无详情列表!')
          }
        })
      },
      searchDevice(query) {
        this.axios({
          method: "get",
          url: "/dms/dmsDevice/deviceListByParams",
          params: {
            orgCode:
              this.searchParams.orgCode && this.searchParams.orgCode.at(-1),
            param: query,
          },
        }).then((res) => {
          if (res.code === 200) {
            this.deviceList = res.data;
          }
        });
      },
      // 获取使用位置
      getOrgList() {
        this.axios({
          method: "get",
          url: "/basic/organization/findListByToken",
          params: { level: 1 },
        }).then((res) => {
          if (res.code === 200) {
            const obj = {
              label: "name",
              value: "code",
              children: "children",
            };
            this.orgList = recursion.convertTree(res.data, obj);
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      },
      //日期
      handleChangeDate(val) {
        this.dateTimeRange = val;
      },
      //分页
      changeNum() {
        this.pageNum = 1;
        this.searchList();
      },
      changePageSize(pageSize) {
        this.pageSize = pageSize;
        this.searchList();
      },
      changePageNum(val) {
        this.pageNum = val;
        this.searchList();
      },
      searchList() {
        //查询列表
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.searchParams
        };

        if (this.searchParams.orgCodes && this.searchParams.orgCodes.length){
          params.orgCodes = this.searchParams.orgCodes
        }

        // params.orgCode = params.orgCode && params.orgCode.at(-1);
        if (this.dateTimeRange[1]) {
          params.startTime = this.$moment(this.dateTimeRange[0]).format(
            "YYYY-MM-DD 00:00:00"
          );
          params.endTime = this.$moment(this.dateTimeRange[1]).format(
            "YYYY-MM-DD 23:59:59"
          );
        }
        this.axios({
          method: "post",
          url: "/dms/agv/towing",
          data: params,
        }).then((res) => {
          if (res.code === 200) {
            this.dataSource = res.data.list;
            this.total = res.data.total;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      },
      //导出
      exportTemplateClick() {
        let params = {
          ...this.searchParams
        };
        params.orgCode = params.orgCode && params.orgCode.at(-1);
        if (this.dateTimeRange[1]) {
          params.startTime = this.$moment(this.dateTimeRange[0]).format(
            "YYYY-MM-DD 00:00:00"
          );
          params.endTime = this.$moment(this.dateTimeRange[1]).format(
            "YYYY-MM-DD 23:59:59"
          );
        }
        const filName = `Twoing报表`;
        this.axios({
          method: "post",
          url: "/dms/agv/towingExport",
          responseType: "blob",
          data: params,
        }).then((res) => {
          fileDownload(res, filName + ".xlsx");
        });
      },
    },
  };
  </script>

  <style lang="scss" scoped></style>
